<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../vue.js"></script>
    <style>
        .div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .fade-enter-active ,.fade-leave-active{
            transition: 2s all;
        }
        /*.fade-leave-to,.fade-enter-to{*/
        /*    transition: 2s linear;*/
        /*}*/

        .fade-enter-active{
            width: 240px;
            height: 240px;
            background-color: #28a4c9;
        }
        .fade-leave-active{
            width: 20px;
            height: 20px;
            background-color: #7a4cff;
        }
        .fade{
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="div14">
<!--    <p v-hello>{{msg}}</p>-->
<!--    <button @click="changeMsg">改变Msg!</button><br>-->
<!--    <span v-hello>我是什么颜色啊?猛男喜欢的颜色！</span>-->
<!--    <div v-hello>你好</div>-->

<!--    <input type="text" v-focus>-->
    <button @click="show">显示/隐藏</button>
<transition name="fade">
    <div v-show="flag" ></div>
</transition>

</div>
</body>
<script>

//    Vue.directive("hello",{
//        bind:function (el,binding) {
//            el.style.color="green"
//            el.style.fontSize="25px"
//            el.style.backgroundColor="pink"
//            el.onclick=function(){
//                alert("被点击了！")
//            }
//
//            console.log("该指令绑定")
//            console.log(binding)
//
//        },
//        inserted:function () {
//            console.log("该指令插入dom")
//
//        },
//        update:function () {
//            console.log("该指令更新")
//        },
//        componentUpdated:function () {
//            console.log("更新完毕！")
//        }
//    })
   new Vue({
        el:"#div14",
       data:{
            msg:"您好",
            username:"xiaomi",
            flag:false
       },
       methods:{
            changeMsg:function () {
              this.msg="小米"
            } ,
           show(){
                console.log(this.flag)
               this.flag=(this.flag===true? false:true)
           }

       },
       // directives:{
       //      // focus:function () { //默认bind或者update
       //      //     alert("打印foucus")
       //      //     el.foucus()
       //      //
       //      // }
       //     focus:{
       //         inserted:function (el) {
       //             //alert("打印focus")
       //             el.focus()
       //         }
       //     }
       // }

  })
</script>
</html>